<template>
  <div>
    <CollapsePanel
      v-for="(item, index) in panels"
      :key="item.name"
      :title="item.title"
      :name="item.name"
      :default-expanded="true"
    >
      <div v-if="index === 0" class="p-20">
        <el-steps :active="creditApplyProgress.length + 1" align-center>
          <el-step
            v-for="(creditItem, creditIndex) in creditApplyProgress"
            :key="creditIndex"
            :title="creditItem.progressDesc"
            :description="creditItem.createTime"
            :status="getStepStatus(creditItem.progressStatus)"
          />
        </el-steps>
      </div>
      <div v-if="index === 1">
        <PlusDescriptions :column="3" :columns="columns" :data="creditApply" />
      </div>
      <div v-if="index === 2">
        <PlusPage
          :search="false"
          :is-card="false"
          :columns="pageConfig"
          :table="{
            hasIndexColumn: true,
          }"
          :default-page-info="{ pageSize: DEFAULT_PAGE_SIZE, page: 1 }"
          :request="getList"
        />
      </div>
    </CollapsePanel>
    <div class="p-20 text-center bg-white">
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { BasePageReq } from '@wlydfe/service'
import type { CreditApplyPayModel } from '@/api/type'
import { getOptionLabel, priceToThousands } from '@wlydfe/core'
import { type PageInfo, type PlusColumn, type RecordType } from '@wlydfe/pro-ui'
import { omit } from 'lodash-es'
import { creditmanageApi } from '@/api'
import CollapsePanel from '@/components/CollapsePanel/CollapsePanel.vue'
import { useEnum } from '@/composables/enum/useEnum'

const router = useRouter()
const route = useRoute()
const enumConfig = useEnum([CommonDictEnum.YDMXRZZT])
const panels = [
  { title: '申请进度', name: '1' },
  { title: '融资信息', name: '2' },
  { title: '运单明细', name: '3' },
]
const applySn = route.query.applySn as string
onMounted(() => {
  if (route.query.applySn) {
    getCreditProgress(route.query.applySn as string)
  }
})
//#region  -----------接口请求及参数-----------
const DEFAULT_PAGE_SIZE = 10
const queryParams = ref<BasePageReq<Partial<CreditApplyPayModel>>>({
  currentPage: 1,
  pageLength: DEFAULT_PAGE_SIZE,
  countTotal: true,
  filterModel: {},
})
const getList = async (query: Partial<PageInfo> & Partial<CreditApplyPayModel>) => {
  // 构造查询参数
  queryParams.value.currentPage = query.page ?? 1
  queryParams.value.pageLength = query.pageSize ?? DEFAULT_PAGE_SIZE
  queryParams.value.filterModel = omit(query, ['page', 'pageSize', 'value'])
  queryParams.value.filterModel.applySn = applySn
  const { succeed, model, total } = await creditmanageApi.getCreditProgressList(queryParams.value)
  return {
    data: succeed ? model : [],
    total: total ?? 0,
  }
}
const creditApplyProgress = ref<any[]>([])
const creditApply = ref<RecordType>({})
const getCreditProgress = async applySn => {
  const { succeed, model } = await creditmanageApi.getCreditProgress({
    applySn,
  })
  if (succeed) {
    creditApply.value = model[0]?.creditApply || {}
    creditApply.value.loanTotalAmt = model[0]?.loanTotalAmt || ''
    creditApplyProgress.value = model[0]?.creditApplyProgress || []
  }
}

const getStepStatus = (status: number) => {
  if (
    [
      CreditApplyStatus.INIT,
      CreditApplyStatus.PUSH_BANK_SUCCESS,
      CreditApplyStatus.CONFIRM_LOAN,
      CreditApplyStatus.LOAN_SUCCESS,
    ].includes(status)
  ) {
    return 'success'
  } else if ([CreditApplyStatus.PUSH_BANK_FAIL, CreditApplyStatus.FAILURE].includes(status)) {
    return 'error'
  }
  return 'process'
}

const goBack = () => {
  router.go(-1)
}
//#endregion

const columns: PlusColumn[] = [
  {
    label: '融资方',
    width: 120,
    prop: 'companyName',
  },
  {
    label: '金融机构',
    width: 120,
    prop: 'financialInstitution',
  },
  {
    label: '金融产品',
    width: 120,
    prop: 'financialProductType',
    render: (value, { row }) => {
      return row.financialProductType && row.financialInstitution === '南京银行股份有限公司'
        ? getOptionLabel(financialProductTypeOptions, value)
        : '-'
    },
  },
  {
    label: '拟融资金额',
    prop: 'applyTotalAmt',
    render: value => {
      return `${priceToThousands(value)}元`
    },
  },
  {
    label: '实际融资金额',
    prop: 'loanTotalAmt',
    render: value => {
      return `${priceToThousands(value)}元`
    },
  },
  {
    label: '融资利率',
    width: 120,
    prop: 'annualRate',
    render: value => {
      return '7.8%'
    },
  },
  {
    label: '还款方式',
    prop: 'repaymentMethod',
    render: value => {
      return '按月付息，到期还本'
    },
  },
  {
    label: '用信申请时间',
    width: 190,
    prop: 'createdDate',
    valueType: 'date-picker',
  },
]
const pageConfig: PlusColumn[] = [
  {
    label: '用信编号',
    prop: 'applySn',
  },
  {
    label: '运单号',
    prop: 'bizId',
  },
  {
    label: '融资金额（元）',
    prop: 'applyAmt',
    render: value => {
      return priceToThousands(value)
    },
  },
  {
    label: '期次状态',
    prop: 'loanStatus',
    valueType: 'select',
    options: enumConfig[CommonDictEnum.YDMXRZZT],
  },
]
</script>
